<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
    <base href="<%=basePath%>">
    <title></title>
    <meta http-equiv="cache-control" content="no-cache">

    <link rel="stylesheet" type="text/css" href="/css/edittable.css"  ></link>
    <link rel="stylesheet" type="text/css" href="/css/validate.css"  ></link>
    <script type="text/javascript"  src="/js/jquery-1.8.0.js"></script>

    <script>
        function validate(){
            var result=true;

            if(validateRoleName( document.getElementById("roleName") )==false){
                result=false;
            }

            return result;
        }

        function showInfo(labelId ,msg){
            $("#"+labelId).html(msg);
            $("#"+labelId).removeClass().addClass("info");
        }

        function showError(labelId ,msg){
            $("#"+labelId).html(msg);
            $("#"+labelId).removeClass().addClass("error");
        }

        function showOk(labelId){
            $("#"+labelId).html("√");
            $("#"+labelId).removeClass().addClass("ok");
        }

        function validateRoleName(item){
            var result=true;

            if(item.value==""){
                result=false;
                showError(item.id+"_msg",  "输入错误! 角色名称不能为空");
            }
            else{
                //定义正则表达式：单个英文字母（小写a-z、大写A-Z）、数字（0-9）或汉字
                var reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{2,15}$/;

                if(reg.test(item.value)==false){
                    result=false;
                    showError(item.id+"_msg",  "角色名称格式错误! ");
                }
                else{
                    showOk(item.id+"_msg");
                }
            }
            return result;
        }
    </script>

    <style>
        /*校对CSS*/
        .info{
            font-size:12px;
            font-weight:bold;
            color:blue;
        }

        .ok{
            font-size:12px;
            font-weight:bold;
            color:green;
        }

        .error{
            font-size:12px;
            font-weight:bold;
            color:red;
        }
    </style>
</head>

<body>

<div class ="div_title">
    <div class="div_titlename"> <img src="/images/san_jiao.gif" ><span>角色创建</span></div>
</div>

    <form action="RoleServlet" method="post" onsubmit="return confirm('确认要添加吗？')" >
        <input type="hidden" name="flag" value="add" >

        <table class="edit_table" >
            <tr>
                <td class="td_info">角色名称:</td>
                <td class="td_input_short">
                    <input type="text" class="txtbox" id="roleName" name="roleName" value="${roleinfo.roleName }" onfocus="showInfo('roleName_msg','2-15位；只限数字/英文(不区分大小写)/中文')"
                           onblur="validateRoleName(this)" id="roleName"/>
                </td>
                <td>
                    <label class="validate_info" id="roleName_msg"></label>
                </td>
            </tr>
            <tr>
                <td class="td_info">角色描述:</td>
                <td><textarea rows="4" cols="27" name="des" class="txtarea" >${param.des }</textarea> </td>
                <td><label></label></td>
            </tr>
            <tr>
                <td class="td_info"> </td>
                <td>
                    <input class="form_btn" type="submit" value="提交" />
                    <input type="reset"  class="form_btn" value="重置" /> </td>
                <td>
                    <label id="result_msg" class="result_msg">${msg}</label>
                </td>
            </tr>
        </table>
    </form>


</body>
</html>